<template>
  <div>
    <el-row>
     标题: <el-input   class="title" style='width: 500px;margin:20px 0' v-model="newsFormData.title">
        </el-input>
    </el-row>
    <el-form ref="form" :model="newsFormData" :inline="true"
    >
      <el-form-item label="作者姓名" class="author">
        <el-input v-model="newsFormData.author"></el-input>
      </el-form-item>
      <el-form-item label="新闻种类" class="category">
        <el-select  v-model="newsFormData.category" placeholder="请选择"
                    popper-class="select"
                    @visible-change= "changeValue($event)">
          <el-option
            v-for="item in categoryList"
            :key="item.id"
            :label="item.category"
            :value="item.category">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" class="createTime">
        <el-date-picker
          v-model="newsFormData.createTime"
          type="date"
          popper-class="date-picker"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
    </el-form>
    <!--  编辑栏-->
    <div id="div1" style="margin-top: 30px;z-index: -1"></div>
    <div class="button">
      <el-button round @click="commit" type="primary">修改</el-button>
    </div>
  </div>
</template>

<script>
import wangEditor from 'wangeditor';
import { request } from '@/network/request';
import { basePath } from '../../commom/commom';

export default {
  name: 'NewsUpdate',
  data() {
    return {
      editor: null,
      editorData: '',
      newsFormData: {
        id: '',
        title: '',
        content: '',
        author: '',
        categoryId: '',
        createTime: '',
        category: '',
      },
      categoryList: [],
    };
  },
  created() {
    this.getNewsFormData(this.$route.params.id);
    this.getCategory();
  },
  mounted() {
    // eslint-disable-next-line new-cap
    const editor = new wangEditor('#div1');
    // 配置 server 接口地址
    editor.config.uploadImgServer = `${basePath}/upload`;
    // 配置 server 接口地址
    editor.config.uploadVideoServer = `${basePath}/upload`;
    editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024;// 1024m
    editor.config.uploadVideoName = 'file';
    editor.config.uploadFileName = 'file';
    editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
    };
    editor.config.uploadImgHooks = {
      customInsert(insertImgFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result);
        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(`${basePath}/${result.data[0]}`);
      },
    };
    editor.config.uploadVideoHooks = {
      customInsert(insertVideoFn, result) {
        // result 即服务端返回的接口
        console.log('customInsert', result);
        // insertVideoFn 可把视频插入到编辑器，传入视频 src ，执行函数即可
        insertVideoFn(`${basePath}/${result.data[0]}`);
      },
    };
    // 创建编辑器
    editor.config.height = 500;
    editor.create();
    this.editor = editor;
  },
  methods: {
    changeValue(callback) {
      if (callback === true) {
        this.getCategory();
      }
    },
    getCategory() {
      request({
        url: '/news/category',
      }).then((res) => {
        this.categoryList = res.data;
      });
    },
    getNewsFormData(id) {
      request({
        url: `/news/find/${id}`,
      }).then((res) => {
        this.editor.txt.html(res.data.content);
        this.newsFormData = res.data;
      });
    },
    commit() {
      for (let i = 0; i < this.categoryList.length; i += 1) {
        if (this.categoryList[i].category === this.newsFormData.category) {
          this.newsFormData.categoryId = this.categoryList[i].id;
        }
      }
      this.newsFormData.content = this.editor.txt.html();
      request({
        url: '/news/update',
        method: 'post',
        params: this.newsFormData,
      }).then((res) => {
        if (res.code !== 200) return this.$message.error('新闻修改失败');
        this.$router.push({ path: '/news/list' });
        return this.$message.success('新闻修改成功');
      });
    },
    changeOption(e) {
      console.log(e);
    },
  },
};
</script>

<style  lang="less" >
.select{
  z-index: 30000 !important;
  background-color: pink !important;
  .el-scrollbar__wrap {
    max-height: 150px; // 最大高度
    overflow-x: hidden; // 隐藏横向滚动栏
    .el-select-dropdown__item:hover{
      color: white;
      background-color: black;
    }
  }
}
.date-picker{
  color: pink !important;
  z-index: 300001 !important;
}
.el-date-picker{
}
.date-class{
  margin-top: 300px;
}

.button{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 20px;
}
</style>
